<template>
    <div class="list_wrapper" ref="list_wrapper">
        <div class="con">
          <div class="current_address" v-show="this.addressName">
            <h3>当前地址</h3>
            <div class="con">
              <span>{{this.addressName}}</span>
            </div>
          </div>
          <div class="address history" v-show="limitHistory.length">
            <h3>搜索历史</h3>
            <div class="con">
              <div class="item border-bottom" v-for="(item, index) of limitHistory" :key="index" @click="handleHistoryClick(index, item.geohash, item.name)">
                  <p><span class="name">{{item.name}}</span></p>
                  <p class="address">{{item.address}}</p>
              </div>
              <div class="item border-bottom" @click="handleHistoryClear">
                  <p><span class="clear">清空历史记录</span></p>
              </div>
            </div>
          </div>
          <!-- <div class="address">
            <h3>收货地址</h3>
            <div class="con">
              <div class="item border-bottom">
                  <p><span class="name">朱先生</span><span class="call">先生</span><span class="tel">13779972323</span></p>
                  <p class="address">厦门市思明区洪文一里1-135号</p>
              </div>
              <div class="item border-bottom">
                  <p><span class="name">朱先生</span><span class="call">先生</span><span class="tel">13779972323</span></p>
                  <p class="address">厦门市思明区洪文一里1-135号</p>
              </div>
              <div class="item border-bottom">
                  <p><span class="name">朱先生</span><span class="call">先生</span><span class="tel">13779972323</span></p>
                  <p class="address">厦门市思明区洪文一里1-135号</p>
              </div>
            </div>
          </div> -->
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'ChooseAddressList',
  props: {
    currentAddress: String,
    placeList: Array,
    placeHistory: Array
  },
  methods: {
    handleHistoryClick (index, geohash, name) {
      this.SAVE_GEOHASH(geohash)
      this.RECORD_ADDRESSNAME(name)
      this.$emit('change', index, geohash)
    },
    handleHistoryClear () {
      this.$emit('clear')
    },
    ...mapMutations(['SAVE_GEOHASH', 'RECORD_ADDRESSNAME'])
  },
  computed: {
    ...mapState(['addressName']),

    // 限制历史记录只显示5条
    limitHistory () {
      const history = this.placeHistory
      return history.reverse().slice(0, 5)
    }
  },
  watch: {
  },
  mounted () {
    this.scroll = new BScroll(this.$refs.list_wrapper, {
      mouseWheel: {
        speed: 20,
        invert: false,
        easeTime: 300
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
    .list_wrapper
      overflow: hidden
      position: absolute
      top: 2rem
      left: 0
      right: 0
      bottom: 1rem
      .current_address h3
        padding: .3rem 0 .14rem .3rem
      .current_address .con
        padding: 0 .3rem
        line-height: .88rem
        background: #fff
        span
          font-size: .3rem
          font-weight: bold
          color: #333
      .address h3
        padding: .3rem 0 .14rem .3rem
      .address  .item
        padding: .22rem .3rem
        background: #fff
        span
          display: inline-block
        .name
          font-size: .3rem
          font-weight: bold
          color: #333
        .call
          padding: 0 .2rem 0 .1rem
        .clear
          font-size: .3rem
          display: block
          text-align: center
</style>
